<template>
    <div>
        <el-row>
            <el-col style="margin-left:200px" :span="16">
                <fieldset style="width:100%;padding:40px">
                    <legend style="margin-left:40px;">
                        <h1>案件基本信息</h1>
                    </legend>
                    <el-form ref="form" :model="form" label-width="120px" label-suffix=":">
                        <el-form-item label="案件编号">
                            <el-input v-model="form.code" placeholder="请输入案件编号   添加嫌疑人和受害人依然使用编码"></el-input>
                        </el-form-item>
                        <el-form-item label="案件名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item  label="案件发生日期">
                            <el-date-picker v-model="form.startTime"></el-date-picker>
                        </el-form-item>
                        <el-form-item  label="侦察终结日期">
                            <el-date-picker v-model="form.endTime"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="简要情况">
                            <el-input type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-col style="text-align:right" :span="24">
                            <el-button type="primary">保存</el-button>
                            <el-button>取消</el-button>
                        </el-col>
                    </el-row>
                </fieldset>

                <fieldset style="width:100%;padding:20px">
                    <legend style="margin-left:40px;">
                        <h1>嫌疑人信息</h1>
                    </legend>
                    <div>
                        <el-alert title="嫌疑人列表" style="background-color:black" type="info" :closable="false">
                        </el-alert>
                        <div>
                            <table v-for="i in 3" :key="i" class="userInfoEditTable" style="margin-top:10px;border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                                <tr>
                                    <td class="tb_label">姓名:</td>
                                    <td>张三</td>
                                    <td style="width:12%" rowspan="4">
                                        <img v-if="imageUrl" width="120px" :src="imageUrl">
                                        <img v-else width="120px" src="../../assets/notx.jpg">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tb_label">年龄:</td>
                                    <td>27</td>
                                </tr>
                                <tr>
                                    <td class="tb_label">证件号码:</td>
                                    <td>320xxxxxxxxxxxxxx</td>
                                </tr>
                                <tr>
                                    <td class="tb_label">操作</td>
                                    <td>
                                        <el-button type="text">查看详情</el-button>
                                        <el-button type="text">编辑</el-button>
                                        <el-button style="color:red;" type="text">删除</el-button>
                                    </td>
                                </tr>
                            </table>
                            <el-row>
                                <el-col :span="24" style="margin-top:20px;text-align:right">
                                    <el-button type="danger">新增嫌疑人</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </fieldset>

                <fieldset style="width:100%;padding:20px">
                    <legend style="margin-left:40px;">
                        <h1>受害人信息</h1>
                    </legend>
                    <el-alert title="受害人列表" style="background-color:black" type="info" :closable="false"></el-alert>
                    <table v-for="i in 3" :key="i" class="userInfoEditTable" style="margin-top:10px;border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                        <tr>
                            <td class="tb_label">姓名:</td>
                            <td>李四</td>
                            <td style="width:12%" rowspan="4">
                                <img v-if="imageUrl" width="120px" :src="imageUrl">
                                <img v-else width="120px" src="../../assets/notx.jpg">
                            </td>
                        </tr>
                        <tr>
                            <td class="tb_label">年龄:</td>
                            <td>28</td>
                        </tr>
                        <tr>
                            <td class="tb_label">证件号码:</td>
                            <td>320xxxxxxxxxxxxxx</td>
                        </tr>
                        <tr>
                            <td class="tb_label">操作</td>
                            <td>
                                <el-button type="text">查看详情</el-button>
                                <el-button type="text">编辑</el-button>
                                <el-button style="color:red" type="text">删除</el-button>
                            </td>
                        </tr>

                    </table>
                    <el-row>
                        <el-col :span="24" style="margin-top:20px;text-align:right">
                            <el-button type="danger">新增受害人</el-button>
                        </el-col>
                    </el-row>
                </fieldset>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                startTime:'',
                endTime:''
            },
            imageUrl: null,
        }
    }
}
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
    border: 1px solid darkgrey;
    padding: 10px;
}

.tb_label {
    width: 12%;
}
</style>

